<template>
  <div class="todolist">
    <el-upload
      action="/api/v1/file/fileAlossUpload"
      :multiple="true"
      :auto-upload="false"
      :on-change="onChange"
    >
      <el-icon>
        <el-icon-Plus></el-icon-Plus>
      </el-icon>
    </el-upload>
    <el-button
      style="margin-left: 10px"
      size="small"
      type="success"
      @click="submitUpload"
      >提交</el-button
    >
    <div class="socket">
      <div class="content">
        <div v-for="(item, index) in list" :key="index">
          <div v-if="!item.isYour" :class="['item', item?.isYour ? 'item_me' : null]">
            <div>
              <el-avatar shape="square" :src="item.pic" :size="40">
                {{ item.name.substr(0, 1) }}
              </el-avatar>
            </div>
            <div>
              <div>
                <span>
                  {{ item?.auth ? "【管理员】" : "【用户】" }}
                </span>
                <span :class="['name', item?.auth ? 'adminName' : null]">
                  {{ item.name }}
                </span>
              </div>
              <div class="con_item">{{ item.content }}</div>
            </div>
          </div>
          <div v-else :class="['item', 'item_me']">
            <div>
              <div class="name_me">
                <span>
                  {{ item?.auth ? "【管理员】" : "【用户】" }}
                </span>
                <span :class="['name', item?.auth ? 'adminName' : null]">
                  {{ item.name }}
                </span>
              </div>
              <div class="con_item">{{ item.content }}</div>
            </div>

            <div class="auth_me">
              <el-avatar shape="square" :src="item.pic" :size="40">
                {{ item.name.substr(0, 1) }}
              </el-avatar>
            </div>
          </div>
        </div>
      </div>
      <div class="operation">
        <el-input v-model="input" placeholder="请输入..." />
        <el-button @click="listAdd">发送</el-button>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { Plus } from "@element-plus/icons";
import { fileAlossUpload } from "@/api/user";
type State = {
  list: any[];
  input: string;
  fileList: any[];
  fileData: any;
};

const state = reactive<State>({
  list: [
    {
      name: "yoke",
      auth: 1,
      isYour: 0,
      pic: "https://eggyoke.oss-cn-beijing.aliyuncs.com/2021/12/30/2471b3ee29b695f0fc12e5e911990ec6.png",
      content:
        "1231233333333333333333123333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333",
    },
    {
      name: "t",
      auth: 0,
      isYour: 0,
      pic: "",
      content: "1231233333333333333333123333333333333333333333333333333333",
    },
    {
      name: "我",
      auth: 0,
      isYour: 0,
      pic: "",
      content:
        "12312333333333333333331233333333333333333333333333333333333333333333333333333333",
    },
    {
      name: "爱",
      auth: 1,
      isYour: 0,
      pic: "",
      content:
        "123123333333333333333333333333333333333333333333333333333333333333",
    },
    {
      name: "yoke",
      auth: 1,
      isYour: 1,
      pic: "",
      content:
        "12312333333333333333331233333333333333333333333333333333333333333333333333333333",
    },
    {
      name: "yoke",
      auth: 1,
      isYour: 1,
      pic: "",
      content:
        "123123333333333333333333333333333333333333333333333333333333333333",
    },
  ],
  input: "",
  fileList: [],
  fileData: new FormData(),
});

/**
 * 添加list
 */
const listAdd = (): void => {
  if (state.input) {
    state.list.push(state.input);
    state.input = "";
  }
};

/**
 * 删除
 */
const remove = (item: string): void => {
  state.list = state.list.filter((el) => el !== item);
};

const submitUpload = () => {
  let data = new FormData();
  state.fileList?.forEach((el) => {
    data.append("file", el.raw);
  });

  fileAlossUpload(data).then((res) => {
    console.log(res);
  });
  console.log(data, state.fileList);
};

const onChange = (file, fileList) => {
  // state.fileData.append("file",file.file)
  state.fileList = fileList;
};

const { input, list } = toRefs(state);
</script>

<style scoped lang="less">
.socket {
  width: 50vw;
  height: 35vw;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.content {
  height: calc(100% - 60px);
  background: url("https://picsum.photos/960/612");
  overflow: auto;
  padding: 40px 24px;
  box-sizing: border-box;

  .item {
    display: flex;
    flex-wrap: wrap;
  }

  .con_item {
    width: 20vw;
    word-wrap: break-word;
    margin-bottom: 24px;
    border: 1px solid #fff;
    background: #fff;
    border-radius: 4px;
    margin-left: 8px;
    margin-top: 5px;
    padding: 8px;
  }

  .name {
    color: #00f;
  }

  .adminName {
    color: red;
  }

  .item_me {
    display: flex;
    justify-content: end;
  }

  .name_me{
    text-align: right;
  }
  
  .auth_me{
    margin-left: 8px;
  }
}

.operation {
  display: flex;
  height: 60px;
  display: flex;
  align-items: center;
  border-top: 1px solid #ccc;
}
</style>